<template>
  <div class="disease-details">
    <h1 class="title">{{ disease.name }}</h1>
    <div class="info">

      <div class="item">
        <i class="el-icon-chat-line-square"></i>

        <span class="diseaseTitle">简介：</span>
        <span class="value">{{ disease.intro }}</span>
      </div>
      <el-divider><i class="el-icon-d-caret"></i></el-divider>
      <div class="item">
        <i class="el-icon-warning-outline"></i>

        <span class="diseaseTitle">预防：</span>

        <span class="value">{{ disease.prevent }}</span>
      </div>
      <el-divider><i class="el-icon-d-caret"></i></el-divider>
      <div class="item">
        <i class="el-icon-check"></i>
        <span class="diseaseTitle">医疗保险：</span>
        <span class="value">{{ disease.insurance }}</span>
      </div>
      <el-divider><i class="el-icon-d-caret"></i></el-divider>
      <div class="item">
        <i class="el-icon-zoom-in"></i>
        <span class="diseaseTitle">病因：</span>
        <span class="value">{{ disease.cause }}</span>
      </div>
      <el-divider><i class="el-icon-d-caret"></i></el-divider>
      <div class="item">
        <i class="el-icon-plus"></i>
        <span class="diseaseTitle">护理：</span>
        <span class="value">{{ disease.nursing }}</span>
      </div>
      <el-divider><i class="el-icon-d-caret"></i></el-divider>
      <div class="item">
        <i class="el-icon-share"></i>
        <span class="diseaseTitle">传播途径：</span>
        <span class="value">{{ disease.getWay }}</span>
      </div>
      <el-divider><i class="el-icon-d-caret"></i></el-divider>
      <div class="item">
        <i class="el-icon-view"></i>
        <span class="diseaseTitle">易感人群：</span>
        <span class="value">{{ disease.easyGet }}</span>
      </div>
      <el-divider><i class="el-icon-d-caret"></i></el-divider>
      <div class="item">
        <i class="el-icon-magic-stick"></i>
        <span class="diseaseTitle">治疗概率：</span>
        <span class="value">{{ disease.treatProb }}</span>
      </div>
      <el-divider><i class="el-icon-d-caret"></i></el-divider>
      <div class="item">
        <i class="el-icon-medal"></i>
        <span class="diseaseTitle">治疗详情：</span>
        <div class="value" v-html="disease.treatDetail"></div>
      </div>
      <el-divider><i class="el-icon-d-caret"></i></el-divider>
      <div class="item">
        <i class="el-icon-time"></i>
        <span class="diseaseTitle">治疗周期：</span>
        <span class="value">{{ disease.treatPeriod }}</span>
      </div>
      <el-divider><i class="el-icon-d-caret"></i></el-divider>
      <div class="item">
        <i class="el-icon-money"></i>
        <span class="diseaseTitle">治疗费用：</span>
        <span class="value">{{ disease.treatCost }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Disease',
  props: {
    disease: {
      type: Object,
      required: true
    }
  }
};
</script>

<style scoped>
.disease-details {
  width: 930px;
  margin: 20px auto;
  padding: 20px;
  border-radius: 8px;
}

.title {
  font-size: 24px;
  margin-bottom: 50px;
  margin-left: 500px;
  color: #0082ba;
}

.info {
  font-size: 20px;
  color: #419dbf;;
}

.item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.diseaseTitle {
  flex: 0.3;
  font-weight: bold;
  margin-right: 5px;
  margin-left: 4px;
  font-size: 18px;
  color: #419dbf;;

}

.value {
  flex: 1.7;
  white-space: pre-line;
  margin-left: 100px;
  font-size: 15px;
  color: black;
  letter-spacing: 2px;
}
.el-icon-d-caret{
  color: #D6D6D6;
}
</style>
